<template>
  <div class="user-proflie">
    <van-nav-bar
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 选择文件的选框 -->
    <input type="file" hidden ref="filess" @change="onFileChange">
    <van-cell
     title="头像"
     is-link
     @click="$refs.filess.click()"
    >
      <van-image
       class="avatar"
       width="300"
       height="300"
       fit="cover"
       round
       :src="user.photo"
      />
    </van-cell>

    <van-cell
     title="昵称"
     :value="user.name"
     is-link
     @click="isUpdateNameShow = true"
    >
    </van-cell>

    <van-cell
     title="性别"
     :value="user.gender === 0 ? '男' : '女'"
     is-link
     @click="isUpdateSexShow = true"
    >
    </van-cell>

    <van-cell
    title="生日"
    :value="user.birthday"
    @click="isUpdateBirthdayShow = true"
    is-link
    >
    </van-cell>

    <!-- 编辑昵称的弹出层 -->
    <van-popup
     position="bottom"
     style="height: 100%"
     v-model="isUpdateNameShow"
    >
    <!-- 编辑昵称弹出层中具体内容 UpdateName组件 -->
    <UpdateName
     v-if="isUpdateNameShow"
     @close="isUpdateNameShow = false"
     v-model="user.name"
     @input="user.name = $event"
    >
    <!-- 用v-model="user.name" 因为在子组件UpdateName中 既要接收user.name 也要修改user.name-->
    <!-- @close="isUpdateNameShow = false"作用是<UpdateName>组件点击“取消” 关闭van-popup弹出层 -->
    </UpdateName>
    <!-- /编辑昵称弹出层中具体内容 UpdateName组件 -->
    </van-popup>
    <!-- /编辑昵称的弹出层 -->

    <!-- 编辑 性别 的弹出层 -->
    <van-popup
     position="bottom"
     v-model="isUpdateSexShow"
    >
    <UpdateSex
     v-if="isUpdateSexShow"
     @close="isUpdateSexShow = false"
     v-model="user.gender"
     @input="user.gender = $event"
    >
    </UpdateSex>
    </van-popup>
    <!-- /编辑 性别 的弹出层 -->

    <!-- 编辑 生日 的弹出层 -->
    <van-popup
     position="bottom"
     v-model="isUpdateBirthdayShow"
    >
    <UpdateBirthday
    v-if="isUpdateBirthdayShow"
    @close="isUpdateBirthdayShow = false"
    v-model="user.birthday"
    @input="user.birthday = $event"
    >
    </UpdateBirthday>
    </van-popup>
    <!-- /编辑 生日 的弹出层 -->

    <!-- 编辑 头像 的弹出层 -->
    <van-popup
     position="bottom"
     v-model="isUpdatePhotoShow"
     style="height: 100%"
    >
     <UpdatePhoto
      v-if="isUpdatePhotoShow"
      :imgUrl='imgUrl'
      @close="isUpdatePhotoShow = false"
      @input="user.photo = $event"
     >
     </UpdatePhoto>
    </van-popup>
    <!-- /编辑 头像 的弹出层 -->
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user.js'
import UpdateName from './components/update-name.vue'
import UpdateSex from './components/update-sex.vue'
import UpdateBirthday from './components/update-birthday'
import UpdatePhoto from './components/update-photo.vue'

export default {
  name: 'UserProfile',
  data () {
    return {
      user: {}, // 当前登录用户的个人信息
      isUpdateNameShow: false, // 控制 点击修改昵称的弹窗
      isUpdateSexShow: false, // 控制 点击修改性别的弹窗
      isUpdateBirthdayShow: false,
      isUpdatePhotoShow: false,
      imgUrl: ''
    }
  },
  components: {
    UpdateName,
    UpdateSex,
    UpdateBirthday,
    UpdatePhoto
  },
  created () {
    this.LoadUserProfile()
  },
  methods: {
    async LoadUserProfile() {
      try {
        const { data } = await getUserProfile()
        this.user = data.data
        // console.log('主页面', this.user.birthday)
        // console.log(this.user)
      } catch (err) {
        console.log(err)
      }
    },

    onFileChange () { // 点击 编辑头像时 触发
      // this.$refs.filess.click()
      // console.log(this.$refs.filess)
      const dd = window.URL.createObjectURL(this.$refs.filess.files[0])
      this.imgUrl = dd
      // console.log(dd)
      this.isUpdatePhotoShow = true
      // file-input 如果选了同一个文件不会触发 change 事件
      // 解决办法就是每次使用完毕，把它的 value 清空
      this.$refs.filess.value = ''
    }
  }
}
</script>

<style lang="less" scoped>
.van-popup {
  background-color: #f5f7f9;
}
.van-nav-bar {
  background-color: rgb(7, 193, 96);
  border-radius: 55px 55px 0 0;
}
</style>
